<template>
  <div class="main" style="width:100%">
    <!-- 顶部 -->
    <div class="top">
      <van-icon @click="set()" style="top: 10px;left: 325px;" name="setting-o" color='pink' size="30"/>
    </div>
    <!-- 头像区域 -->
    <div class="head">
      <!-- 左侧头像 -->
      <div class="left">
        <van-image
        style="height:78px;width:78px;margin:20px 0 0 10px"
        round
        width="10rem"
        height="10rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      </div>
      <!-- 右侧个人信息 -->
      <div class="right">
        <p>用户名</p>
        <span>ID:xxxxxxxxx </span>
        <van-icon @click="personal()" class="yjt" name="arrow" color="#b2b2b2" />
        <br>
        <span>经验值: &nbsp; 108/300</span>
        <br>
        <van-progress pivot-text='' :percentage="31" />
      </div>
    </div>

    <!-- 关注,粉丝,帮贡区域 -->
    <ul class="guanzhu">
      <li @click="guan()">0<p>关注</p></li>
      <li @click="fan()">0<p>粉丝</p></li>
      <li style="border:none">100<p>帮贡</p></li>
    </ul>

    <!-- 作品,食谱,收藏,问题区域 -->
    <ul class="zuopin">
      <li @click="zuopin()"><img src="https://image.hongbeibang.com/FgyV7GBC4RPoagtZnK-npLaoB1N6?160X160&imageView2/1/w/80/h/80" alt=""><p>作品</p></li>
      <li @click="food()"><img src="https://image.hongbeibang.com/FhxeeHCgOPEcoLPR3sP6XNbybdvK?160X160&imageView2/1/w/80/h/80" alt=""><p>食谱</p></li>
      <li @click="collect()"><img src="https://image.hongbeibang.com/FkmRCthKDaI5Afc_NdkTZaqNLPE1?160X160&imageView2/1/w/80/h/80" alt=""><p>收藏</p></li>
      <li @click="question()"><img src="https://image.hongbeibang.com/FgKxvkwdg8OOr9mhPok2JBVnCG2n?160X160&imageView2/1/w/80/h/80" alt=""><p>问题</p></li>
    </ul>

    <!-- 分割线 -->
    <div class="line"></div>

    <!-- 列表项 -->
    <ul class="list">
      <li @click="medal()">
        <img src="https://image.hongbeibang.com/FpFAELJdsHHxStgBnhPdgYgGmAYo?48X48&imageView2/1/w/48/h/48" alt="">
        <span>勋章库</span>
        <van-icon class="RightArrow" name="arrow" color="#b2b2b2" />
      </li>
      <li @click="activity()">
        <img src="https://image.hongbeibang.com/FjqJkpwIsLMWXY0LsNTSRG853oJR?48X48&imageView2/1/w/48/h/48" alt="">
        <span>精彩活动</span>
        <van-icon class="rightArrow" name="arrow" color="#b2b2b2" />
      </li>
      <li>
        <img src="https://image.hongbeibang.com/Fu1OwEAsExJ20OHVI2ZqBEtLtubY?48X48&imageView2/1/w/48/h/48" alt="">
        <span>每日签到</span>
        <van-icon class="rightArrow" name="arrow" color="#b2b2b2" />
      </li>
      <li>
        <img src="https://image.hongbeibang.com/FnuWoFzlqjbUFcZHkVG64M-cKA_N?48X48&imageView2/1/w/48/h/48" alt="">
        <span>我的课程</span>
        <van-icon class="rightArrow" name="arrow" color="#b2b2b2" />
      </li>
    </ul>

    <!-- 分割线 -->
    <div class="line"></div>

    <!-- 列表项2 -->
    <ul  class="list2">
      <li>
        <img src="https://image.hongbeibang.com/FloihK3c4UsgFSSuiI6ZNNFiYWHN?48X48&imageView2/1/w/48/h/48" alt="">
        <span>浏览记录</span>
        <van-icon class="rightArrow" name="arrow" color="#b2b2b2" />
      </li>
      <li>
        <img src="https://image.hongbeibang.com/FrIG0d-LU4bOADQE1euyCOGWO7Ep?48X48&imageView2/1/w/48/h/48" alt="">
        <span>达人申请</span>
        <van-icon class="rightArrow" name="arrow" color="#b2b2b2" />
      </li>
      <li>
        <img src="https://image.hongbeibang.com/Fn2YVwr3Ng_AQlJvQCWtBoRBDyjR?48X48&imageView2/1/w/48/h/48" alt="">
        <span>帮贡兑换</span>
        <van-icon class="rightArrow" name="arrow" color="#b2b2b2" />
      </li> 
      
    </ul>
       <div style="height: 0.8rem;"></div>

    <!-- 引入底部组件 -->
    <bottombar></bottombar>
  </div>
</template>

<script>
import bottombar from '@/components/bottombar.vue';
export default {
  methods: {
    // 设置页面
    set(){
      this.$router.push({
        path:'/wode/set'
      })
    },
    // 勋章库页面
    medal(){
      this.$router.push({
        path:'/wode/medal'
      })
    },
    // 作品页
    zuopin(){
      this.$router.push({
        path:'/wode/zuopin'
      })
    },
    // 食谱页
    food(){
      this.$router.push({
        path:'/wode/food'
      })
    },
    // 收藏页
    collect(){
      this.$router.push({
        path:'/wode/collect'
      })
    },
    // 问答页
    question(){
      this.$router.push({
        path:'/wode/question'
      })
    },
    // 关注
    guan(){
      this.$router.push({
        path:'/wode/guan'
      })
    },
    // 粉丝
    fan(){
      this.$router.push({
        path:'/wode/fan'
      })
    },
    // 精彩活动
    activity(){
      this.$router.push({
        path:'wode/activity'
      })
    },
    // 个人设置
    personal(){
      // this.$router.push({
      //   path:'/wode/personal'
      // })
      this.$router.go(-1)
    }
    
  },
  components: { bottombar },};
</script>

<style lang="scss" scoped>
.main{
  &::before{
    content: '';
    display: block;
    height: 5vw;
  }
}
.top{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: rgb(255, 255, 255);
  width: 100vw;
  height: 10vw;
  z-index: 10;
}
.head{
  display: flex;
  width: 98vw;
  position: relative;
  left: 2vw;
  .right{
    position: absolute;
    top: 25px;
    left: 100px;
    .yjt{
      left: 140px;
      font-size: 20px;
    }
    span{
      color: #b2b2b2;
    }
    p{
      font-size: 18px;
    }
  }
}
.guanzhu{
  width: 300px;
  display: flex;
  justify-content: space-evenly;
  margin: 10px 37px;
  border-bottom: 1px solid #e7e2e5;
  li{
    width: 87px;
    border-right: 1px solid #e7e2e5;
    padding:0 6px;
    text-align: center;
    margin-bottom: 5px;
    p{
      color: #999999;
    }
  }
}
.zuopin{
  margin: 10px 0;
  width: 370px;
  display: flex;
  justify-content: space-around;
  li{
    p{
      text-align: center;
    }
    img{
      height: 40px;
      width: 40px;
    }
  }
}
.line{
  height: 10px;
  background-color: #f5f7f9;
}
.list{
  li{
    padding: 12px;
    display: flex;
    span{
      padding-left: 12px;
    }
    .RightArrow{
      left: 245px;
      font-size: 20px;
    }
    .rightArrow{
      left: 232px;
      font-size: 20px;
    }
  }
  img{
    height: 24px;
    width: 24px;
  }
}
.list2{
  img{
    height: 24px;
    width: 24px;
  }
  li{
    padding: 12px;
    display: flex;
    span{
      padding-left: 12px;
    }
  }
  .rightArrow{
      left: 232px;
      font-size: 20px;
    }
}
</style>
